<template>
  <view style="width: 100%; min-height: 100vh; background-color: #F8F8F8;">
    <view id="head" style="width: 100%; position:fixed; top: 0; z-index: 999;">
      <view class="bg-white" style="width: 100%;"
            :style="'height:'+custom_bar+'px'"></view>
      <view style="width: 100%;">
        <view id="search" class="flex cu-bar search bg-white" style="width: 100%; border: none;">
          <view class="action">
            <image src="/static/icon/detail/fanhui-2@2x.png" style="width: 24upx; height: 40upx;" @click="handleBack()"></image>
          </view>
          <view class="search-form round">
            <image src="/static/icon/index/sousuo@2x.png" style="width: 26upx; height: 30upx; margin: 0 22upx;"></image>
            <input :adjust-position="false" type="text" placeholder="搜索" placeholder-style="color: #D8D8D8;"
                   confirm-type="search" style="font-size: 28upx; line-height: 20px !important;" v-model="search_word" @input="pageInit(1,search_word, 1)" />
          </view>
        </view>
      </view>
    </view>
    <view>
      <view style="width: 100%; background-color: #F8F8F8;" :style="'height: '+head_height+'px;'"></view>
      <view class="flex justify-between" style="width: 100%; padding: 0 20upx; flex-wrap: wrap;" v-if="show_flag">
        <view v-if="page_main_data.length > 0" class="flex flex-direction bg-white list" v-for="(item,index) in page_main_data" :key="index" @click="handleToArticle(item.type, item.id)">
          <image :src="item.img_arr[0]" mode="aspectFill" style="width: 346upx; height: 384upx; border-radius: 20upx 20upx 0 0;"></image>
          <view class="flex flex-direction" style="padding: 20upx;">
            <view class="text-hidden article-title">{{item.title}}
            </view>
            <view class="flex align-center" style="width: 100%; height: 40upx; margin: 7% 0;">
              <view class="flex justify-center align-center tag">{{item.category}}</view>
              <view v-if="!item.category_id">
                <image src="/static/icon/index/dianzan@2x.png" style="width: 26upx; height: 26upx;margin: 0 8upx;"></image>
              </view>
              <view v-if="!item.category_id" style="color: #999999; font-size: 24upx;">{{ item.zan_num }}</view>
              <view v-if="item.category_id" style="color: #999999; font-size: 24upx; margin-left: 20upx;">{{item.sale_num}}人购买</view>
            </view>
            <view class="flex justify-between align-center" style="margin-bottom: 7%;" v-if="item.product">
              <view class="flex align-center" v-if="item.product && item.product.sale_price === '0.00'">
                <view style="font-size: 28upx; color: #D8D8D8; font-weight: bold;">免费</view>
              </view>
              <view class="flex align-center" style="width: 49%;" v-if="item.product && item.product.sale_price !== '0.00'">
                <view style="font-size: 28upx; color: #E52718; font-weight: bold;">¥{{item.product && item.product.sale_price}}</view>
                <view class="product-show_price">¥{{item.product && item.product.show_price}}</view>
              </view>
            </view>
            <view class="flex align-center">
              <image :src="item.user && item.user.avatar" mode="aspectFill" style="width: 44upx; height: 44upx; border-radius: 50%;"></image>
              <view class="article-nick_name text-hidden">
                {{item.user && item.user.nick_name}}
              </view>
            </view>
          </view>
        </view>
        <view v-if="page_main_data.length === 0 && show_flag" class="justify-center align-center flex-direction"
              style="width: 100%; margin-top: 160upx; text-align: center;">
          <image src="/static/image/no_content@2x.png" style="width: 264upx; height: 264upx;"></image>
          <view class="flex justify-center" style="font-size: 24upx; color: #999999;">暂无内容</view>
        </view>
      </view>
      <view class="flex align-center justify-center"
            v-if="page_main_data.length >=15"
            style="width: 100%; height: 102upx; padding: 0 50upx;">
        <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
        <view style="width: 40%; text-align: center;">
          <view v-if="!bottom_flag" style="color: #CACACA; font-size: 24upx; margin: 0 40upx;">到底了</view>
          <view v-else class="action">
            <view class="cu-load" :class="!is_load?'loading':'over'" style="font-size: 28upx; color: #CACACA;"></view>
          </view>
        </view>
        <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
      </view>
    </view>
  </view>
</template>

<script>
import {article_getListByCon} from "api/search/search";
import {numSwitch} from "utils/wxUtil";
export default {
  name: "searchResult",
  data() {
    return {
      custom_bar: 0, //通知栏高度
      head_height: 0, //头部高度
      page_main_data: [], //文章数据
      scroll_left: 0, //tab栏横向移动距离
      bottom_flag: true, //触底标识
      page: 1, //分页
      search_word: '', //搜索词
      is_load: true, //加载
      show_flag: false,
    }
  },
  mounted() {
    const query = uni.createSelectorQuery().in(this);
    query.select('#head').boundingClientRect(data => {
      this.head_height = data.height + 15;
    }).exec();
  },
  methods: {
    computeNum: numSwitch,
    //初始化
    pageInit(page, search_word, type){
      article_getListByCon({page, search_word}).then(res=>{
        if(type){
          this.page_main_data = [];
        }
        let temp = res.data.data;
        if(!temp.length){
          this.bottom_flag = false;
        }else {
          temp.forEach(item=>{
            item.zan_num = this.computeNum(item.zan_num)
            this.page_main_data.push(item);
          })
        }
        this.show_flag = true;
      })
    },
    handleBack(){
      uni.navigateBack({
        delta: 1
      });
    },
    //去文章页
    handleToArticle(type, article_id){
      let jump_url_obj = {
        article: '/pages/article/article',
        article_product: '/pages/passBand/projectDetail/projectDetail',
        product: '/pages/passBand/otherDetail/otherDetail',
      }
      this.$uniNavigateTo({
        url: jump_url_obj[type],
        query: {
          article_id
        }
      })
    },
  },
  onLoad(e) {
    this.search_word = e.search_word;
    this.custom_bar = uni.getStorageSync('system_info').statusBarHeight;
    this.pageInit(1, e.search_word)
  },
  //上拉加载
  onReachBottom() {
    if(this.bottom_flag){
      this.is_load = false;
      this.page += 1;
      this.pageInit(this.page, this.search_word);
    }
    console.log('上拉加载')
  },
  //下拉刷新
  onPullDownRefresh() {
    this.page = 1;
    this.bottom_flag = true;
    this.pageInit(1, this.search_word,1);
    uni.stopPullDownRefresh();
  }
}
</script>

<style lang="less" scoped>
/deep/ .cu-bar .search-form {
  height: 70upx;
  border: 2upx solid #EDEDED;
  background-color: white;
}
/deep/ .cu-bar.fixed, .nav.fixed{
  box-shadow: none;
}
.product-show_price{
  font-size: 20upx;
  color: #D5D5D5;
  font-weight: bold;
  text-decoration: line-through;
  margin-left: 10upx;
}
.article-nick_name{
  max-width: 80%;
  font-size: 24upx;
  color: #999999;
  margin-left: 10upx;
}
.article-title{
  width: 100%;
  font-size: 28upx;
  font-weight: bold;
  color: black;
}
.list {
  width: 346upx;
  //height: 618upx;
  border-radius: 20upx;
  margin-bottom: 30upx;
}

.tag {
  font-size: 22upx;
  padding: 0 12upx;
  color: #E52718;
  height: 40upx;
  background-color: #FFE9E7;
  border-radius: 4upx;
}
.text-red{
  color: #E52718;
}
</style>
